import React, { useState, useEffect } from 'react';
import { Tabs, Spin } from 'antd';
import { history } from 'umi'
import { connect } from 'umi';
import { eventTrack } from '@/utils/track';
import { MoreBar } from '../common/TabBarExtraContent';
import styles from '../../homepage.less';
import RuleList from './RuleList';

const { TabPane } = Tabs;
/**
 * 规则制度
 */
const Gzzd = ({ dispatch, rules, loading, ...props }) => {
    const { responders } = props;
    const { droppableProps, onAdd } = responders;
    // const [spinning, setSpinning] = useState(false);
    const { ruleType = [] } = rules;
    const [activeKey, setActiveKey] = useState('personnel');

    const getMoreLink = () => {
        const map = {
            personnel: '/office/institutions/rulesManage/personnel',
            finance: '/office/institutions/rulesManage/finance'
        };
        return map[activeKey];
    };

    const callback = key => {
        // 埋点
        setActiveKey(key);
    };

    // 获取类型
    const getRuleType = () => {
        dispatch({
            type: 'rules/featchRuleType',
            payload: {
                code: 'institutionType'
            },
            callback: res => {
                const data = {};
                res.forEach(item => {
                    data[item.dictValue] = {
                        list: [],
                        pagination: {
                            pageSize: 4,
                            current: 1,
                            total: 0
                        }
                    };
                });
                dispatch({
                    type: 'rules/save',
                    payload: {
                        rulesTableList: data
                    }
                });
            }
        });
    };
    const renderedPanels = () =>
        ruleType.map(item => (
            <TabPane tab={item.dictName} key={item.dictValue}>
                <RuleList institutionType={item.dictValue} droppableProps={droppableProps} />
            </TabPane>
        ));
    useEffect(() => {
        if (!ruleType.length) getRuleType();
    }, []);
    return (
        <Spin spinning={loading.effects['rules/featchRuleType']}>
            <Tabs
                className={styles.wnWdlcTitle}
                activeKey={activeKey}
                onChange={callback}
                onTabClick={key => {
                    const eventMap = {
                        personnel: 'portal_rules_manage_personnel_click',
                        finance: 'portal_rules_manage_finance_click',
                        brand: 'portal_rules_manage_brand_click'
                    };
                    eventTrack({
                        eventName: eventMap[key],
                        pageName: 'personal_portal'
                    });
                }}
                tabBarExtraContent={
                    <MoreBar
                        linkProps={{
                            to: getMoreLink(),
                            onClick: (e, url) => {
                                eventTrack({
                                    eventName: 'portal_rules_manage_more_click',
                                    pageName: 'personal_portal'
                                });
                                history.push(url);
                            }
                        }}
                        onAdd={onAdd}
                    />
                }
            >
                {renderedPanels()}
            </Tabs>
        </Spin>
    );
};
export default connect(({ loading, rules }) => ({
    rules,
    loading
}))(Gzzd);
